<script>
/**
 * Earning Reports component
 */
export default {
  data() {
    return {
      WeeklyEarning: {
        series: [72],
        chartOptions: {
          chart: {
            type: "radialBar",
            wight: 60,
            height: 60,
            sparkline: {
              enabled: true
            }
          },
          dataLabels: {
            enabled: false
          },
          colors: ["#5664d2"],
          stroke: {
            lineCap: "round"
          },
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: "70%"
              },
              track: {
                margin: 0
              },
              dataLabels: {
                show: false
              }
            }
          }
        }
      },
      monthlyEarning: {
        series: [65],
        chartOptions: {
          chart: {
            type: "radialBar",
            wight: 60,
            height: 60,
            sparkline: {
              enabled: true
            }
          },
          dataLabels: {
            enabled: false
          },
          colors: ["#1cbb8c"],
          stroke: {
            lineCap: "round"
          },
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: "70%"
              },
              track: {
                margin: 0
              },

              dataLabels: {
                show: false
              }
            }
          }
        }
      },
      sel: '全部类型'
    };
  },
  methods: {
    handleCommand(value){
      this.sel = value
    },
    jump(v){
      console.log(v);
      // this.$router.push({
      //   path: '/log',
      //   query: {
      //     type: v
      //   }
      // })
    }
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body">

      <div class="float-right">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{sel}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部类型">全部类型</el-dropdown-item>
            <el-dropdown-item command="资讯数据">资讯数据</el-dropdown-item>
            <el-dropdown-item command="招标数据">招标数据</el-dropdown-item>
            <el-dropdown-item command="工商数据">工商数据</el-dropdown-item>
            <el-dropdown-item command="招聘数据">招聘数据</el-dropdown-item>
            <el-dropdown-item command="股票数据">股票数据</el-dropdown-item>
            <el-dropdown-item command="政策数据">政策数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <h4 class="card-title mb-4" style="font-size: 17px;">24小时种子状态统计</h4>
      <div class="text-center">
        <div class="row">
          <div class="col-sm-6">
            <div>
              <div class="mb-3">
                <apexchart
                  class="apex-charts"
                  height="100"
                  wight="100"
                  dir="ltr"
                  :series="WeeklyEarning.series"
                  :options="WeeklyEarning.chartOptions"
                ></apexchart>
              </div>
              <p @click="jump('失效种子')" class="text-muted text-truncate pointer">失效种子</p>
              <h5 @click="jump('失效种子')" class="mb-0 pointer">2,523</h5>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="mt-5 mt-sm-0">
              <div class="mb-3">
                <apexchart
                  class="apex-charts"
                  height="100"
                  wight="100"
                  dir="ltr"
                  :series="monthlyEarning.series"
                  :options="monthlyEarning.chartOptions"
                ></apexchart>
              </div>

              <p @click="jump('有效种子')" class="text-muted text-truncate pointer">有效种子</p>
              <h5 @click="jump('有效种子')" class="mb-0 pointer">11,235</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.text-muted{
  margin-bottom: 0;
  padding-bottom: .5rem;
}
</style>

